<template>
  <div v-show="!loading">
    <div class="top-bar" >
      <mu-appbar :title="singerInfo.sName" style="border: 0;background: none">
        <mu-icon-button icon="arrow_back" slot="left" @click="goBack" />
      </mu-appbar>
    </div>
    <div class="photo" :style="{'background-image': 'url(' + 'http://hongtaofans.cn/music/resources/pic/singer/'+ singerInfo.sPicture+ ')'}">
      <div class="singer-info">
        <p>{{singerInfo.sName}}</p>
        <p>粉丝：{{singerInfo.musicCount}} 万</p>
      </div>
    </div>
    <div class="singer-content">
      <mu-tabs :value="activeTab" @change="handleTabChange" class="view-tabs">
        <mu-tab value="singer-music" title="单曲"/>
        <mu-tab value="singer-desc" title="简介"/>
      </mu-tabs>
      <div v-if="activeTab === 'singer-music'">
        <mu-list :value="value"  @change="change">
          <div  v-for="(item, index) in songList"  @click="playAudio(item)">
            <mu-list-item :disableRipple="true" :title="item.mName" :value="index" :describeText="item.authod" >
              <span slot="left" class="indexStyle">{{index + 1}}</span>
            </mu-list-item>
            <mu-divider />
          </div>
        </mu-list>
      </div>
      <div v-if="activeTab === 'singer-desc'" class="singer-desc">
        <p>{{singerInfo.sIntroduce}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data () {
      return {
        singerInfo: {
          sId: '',
          sName: '',
          musicCount: '',
          sPicture: '',
          sIntroduce: ''
        },
        songList: [],
        name: '',
        activeTab: 'singer-music',
        value: 2,
        loading: true
      }
    },
    beforeRouteEnter: (to, from, next) => {
      next(vm => {
        vm.getSingerInfo()
        vm.getSingerSongs()
      })
    },
    // created () {
    //   this.getSingerInfo()
    // },
    methods: {
      getSingerInfo () {
        const data = qs.stringify({
          sId: this.$route.params.id
        })
        this.$http.post('http://hongtaofans.cn/music/music/getsingerinfo', data)
        .then((res) => {
          if (res.data.status === 0) {
            this.singerInfo.sId = res.data.result.sId
            this.singerInfo.sName = res.data.result.sName
            this.singerInfo.musicCount = res.data.result.musicCount
            this.singerInfo.sPicture = res.data.result.sPicture
            this.singerInfo.sIntroduce = res.data.result.sIntroduce
            this.loading = false
          } else {
            console.log('获取歌手信息出错！')
          }
        })
      },
      getSingerSongs () {
        const data = qs.stringify({
          sId: this.$route.params.id
        })
        this.$http.post('http://hongtaofans.cn/music/singer/getmusiclist', data)
        .then((res) => {
          if (res.data.status === 1) {
            this.songList = res.data.result
            this.loading = false
          } else {
            console.log('获取歌手信息出错！')
          }
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      handleTabChange (val) {
        this.activeTab = val
      },
      playAudio (item) {
        this.$store.commit('pause')
        const data = qs.stringify({
          mId: item.mId
        })
        this.$http.post('http://hongtaofans.cn/music/music/getmusicpath', data).then((res) => {
          console.log(res.data)
          var url = `http://hongtaofans.cn/music/resources/music/${res.data.musicpath}`
          var audio = {}
          audio.id = item.mId
          audio.singer = item.mName
          audio.albumPic = `http://hongtaofans.cn/music/resources/pic/singer/${res.data.coverpath}`
          audio.name = item.authod
          this.$store.commit('addToList', audio)
          this.$store.commit('openLoading')
          this.$store.commit('setAudio')
          this.$store.commit('setLocation', url)
          // this.$store.dispatch('getSong', audio.id)
        }).catch((error) => {
          console.log('加载单曲信息出错：' + error)
        })
      },
      change (val) {
        this.value = val
      }
    }
  }
</script>
<style lang="less" scoped>
@import "../assets/theme.less";
.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    text-align: left;
  }

   // 修改默认的bar样式
  .mu-appbar {
    background-color: transparent;
  }
  .bar-line {
    display: block;
    bottom: 0 ;
    left: 0;
    display: block;
    width: 100%;
    height: 0.05rem;
    background: radial-gradient(#d3d3d3 -90%, transparent 100%);
  }

  .mu-paper-1 {
    box-shadow: none;
    > .mu-appbar-title {
      text-align: center;
      font-size: 14px;
    }
  }

  .view-tabs {
    background-color: #fff;
    color: rgba(0,0,0,.87);
    >.mu-tab-link {
      color: rgba(102,102,102,1);
    }
    >.mu-tab-active{
      color: @primaryColor;
    }
  }


  .photo {
    position: relative;
    width: 100%;
    height: 9rem;
    background-size: cover;
    background: #aaa
  }

  .singer-info {
    position: absolute;
    line-height: 10px;
    color: #fff;
    bottom: .3rem;
    left: .7rem;
  }
  
  .singer-info p:first-child {
    font-size: .6rem;
  }

  .singer-desc {
    padding: 0 1rem;
    line-height: 1.2rem;
  }
 
  .indexStyle {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bolder;
  }
</style>

